<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Pushpin maps for groups</title>
    <script
      src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAALTdx9qjrdl_2yO4uD4jnWxQ_6N4dkHg7_wIKENxVG1go3UnpWxRwWZP6VSh5aDY53HnYXQe1FQQEGw" type="text/javascript"></script>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <link rel="icon" href="favicon.ico" type="image/x-icon">
  </head>
  <body onunload="GUnload()">
    <center>
      <h2>Promote geographical issues such as ride sharing within your organization or group.</h2>
    </center>

    <p> Enter or revise your group's information:<br>
    <table>
      <tr><td>
    {% if countLog %} 
    Go to <a href="/mainlog?place={{place}}"> {{place }} log</a>
    <br />
    {% endif %}
      <p>First, <strong>drag the pushpin</strong> to its desired location,
          <strong>reposition the map</strong> by dragging it around or panning with arrow
          buttons on the map, and <strong>zoom in the map</strong> by clicking the "+" or by double
          clicking on the map near where you want the map center to be. You may have to reposition the pushpin and the
          map, and zoom the map, in <font color="blue">repeated cycles</font> until you get the result
          you desire.
          </p>
          <p>Second, in the supplied bubble, fill in the fields. Each field
          has typical values that you will overtype. The "moreinfo"
          field is for extra information you may wish to supply
          your people.</p>
          <p>Third, click the "submit" button if everything looks right. If not,
          start over by reloading the page.  
          </p>
          <p>
          You can revise all of the entries you make at a later time, so 
          do not be worried. The categories you supply for the pushpins
          people place will each have an associated color, so be 
          careful to have an equal number of categories and colors. 
          The system requires at least one category and color.
          Some common colors and their codes can be seen at the bottom
          of this page.
          </p>

          <p>
          Here are a few details you may want to know.
          </p>
          <p>
          If you press the "return" key while you have the pushpin bubble form
          open, that is like pressing the "submit" button.
          </p>
          <p>
          The appearance of this page is different from the one seen by end
          users. In order to see that finished version, you must sign out by
          returning to the homepage, and clicking on that link.
          </p>
          <p>
          There is a "More information" input field for you to give additional
          instructions to your group. If you want to encourage your people to
          include their phone numbers in their information, you may want to
          suggest that they disguise the numbers as characters using a format
          like the one in the graphic supplied here. 

          </p>
          <img src="phonedial.png" width="127" height="141" /> 
          <p>
          The phonedial image could be used to recommend a way for your 
          map users to code their (phone) numbers if it is essential that
          you recommend leaving numbers in their information. 
          
          
          </p>
          <p>
          <tt>schott DOT bee are eye eh en AT gee em ae eye el DOT com</tt></p>
        </td>
        <td valign="top">

          <!--div id="map" style="width: 900px; height: 700px"></div-->
          <div id="map" style="width: 700px; height: 500px"></div>
    {% if not countLog %} 
          <a href="/mainlog?place={{place}}">Add a log page now or later</a>
    <br />
    {% endif %}
          <a href="/mapowner?place={{place}}">Add or delete pins on your map page now or later</a>
          <!--a href="store.htm">Back to the tutorial page</a-->


        </td>
      </tr>
      <table>
        <tr>
          <th><font color="blue">*</font>Color</th>
          <th>Hexadecimal</th>
          <th>Color</th>
          <th>Hexadecimal</th>
          <th>Color</th>
          <th>Hexadecimal</th>
          <th>Color</th>
          <th>Hexadecimal</th>
        </tr>
        <tr>
          <td>aqua</td>
          <td style="background:#0FF; color:#000; font-family:monospace;">#00FFFF</td>
          <td>gray</td>
          <td style="background:#808080; color:#FFF; font-family:monospace;">#808080</td>
          <td>navy</td>
          <td style="background:#000080; color:#FFF; font-family:monospace;">#000080</td>
          <td>silver</td>
          <td style="background:#C0C0C0; color:#000; font-family:monospace;">#C0C0C0</td>
        </tr>
        <tr>
          <td>black</td>
          <td style="background:#000; color:#FFF; font-family:monospace;">#000000</td>
          <td>green</td>
          <td style="background:#008000; color:#FFF; font-family:monospace;">#008000</td>
          <td>olive</td>
          <td style="background:#808000; color:#FFF; font-family:monospace;">#808000</td>
          <td>teal</td>
          <td style="background:#008080; color:#fff; font-family:monospace;">#008080</td>
        </tr>
        <tr>
          <td>blue</td>
          <td style="background:#00F; color:#FFF; font-family:monospace;">#0000FF</td>
          <td>lime</td>
          <td style="background:#0F0; color:#000; font-family:monospace;">#00FF00</td>
          <td>purple</td>
          <td style="background:#800080; color:#FFF; font-family:monospace;">#800080</td>
          <td>white</td>
          <td style="background:#FFF; color:#000; font-family:monospace;">#FFFFFF</td>
        </tr>
        <tr>
          <td>fuchsia</td>
          <td style="background:#F0F; color:#000; font-family:monospace;">#FF00FF</td>
          <td>maroon</td>
          <td style="background:#800000; color:#FFF; font-family:monospace;">#800000</td>
          <td>red</td>
          <td style="background:#F00; color:#FFF; font-family:monospace;">#FF0000</td>
          <td>yellow</td>
          <td style="background:#FF0; color:#000; font-family:monospace;">#FFFF00</td>
        </tr>
      </table>      
      
    </table>
    <noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b> 
      However, it seems JavaScript is either disabled or not supported by your browser. 
      To view Google Maps, enable JavaScript by changing your browser options, and then 
      try again.
    </noscript>


    <script type="text/javascript">
      //<![CDATA[

    /*This script is based on the work of Mike Williams' example_store.htm
      who has been extremely helpful and whose great tutorial are at the link
      http://www.econym.demon.co.uk/googlemaps/ 
    */

    if (GBrowserIsCompatible()) {

      // == Display the map, with some controls and set the initial location 
      var place_name = '{{place|addslashes}}';
      var user_name = '{{user}}';
      var lastmarker ;
      var lastcenter;
      var myEventListener;
      var zoom = '{{map_zoom}}';
      var map_lat       = '{{ center_lat}}';
      var map_lng       = '{{ center_lng}}';
      var pin_lat       = '{{ marker_lat}}';
      var pin_lng       = '{{ marker_lng}}';
      var pin_title     = '{{ place }}';

      if ('{{map_zoom}}'   == 'None'){zoom = 2;}
      if ('{{center_lat}}' == 'None'){map_lat = 24.21;}
      if ('{{center_lng}}' == 'None'){map_lng =-41.48;}
      if ('{{marker_lat}}' == 'None'){pin_lat = 24.21;}
      if ('{{marker_lng}}' == 'None'){pin_lng =-41.48;}
      zoom = parseFloat(zoom);
      var start = new GLatLng(parseFloat(map_lat),parseFloat(map_lng));
      var startpin = new GLatLng(parseFloat(pin_lat),parseFloat(pin_lng));
      var map = new GMap2(document.getElementById("map"),{draggableCursor:"default"});
      map.addControl(new GLargeMapControl());
      map.setCenter(start , zoom);

      function createMarker(point){
      var markerOptions = {title:"Drag and zoom the map and reposition me, before clicking on me", draggable:true};
      var marker = new GMarker(point,markerOptions);
      myEventListener = new GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(iwform);
          whenReady( 'idinput', function( element) {
            element.focus();
            }); 
          lastmarker = marker;
          lastcenter = map.getCenter();
          });
      map.addOverlay(marker);
      lastmarker=marker;
      lastcenter = map.getCenter();
      return marker;
      }
    
      function whenReady( id, callback ) {
        var interval = setInterval( function() {
            var element = document.getElementById( id );
            if( element ) {
            clearInterval( interval );
            callback( element );
            }
            }, 20 );
      }

      function process(form) {
        // == populate map data
        map.setCenter(lastcenter, map.getZoom());
        var people = escape(form.people.value);
        var contact = escape(form.contact.value);
        var moreinfo = escape(form.moreinfo.value);
        var prevgroup = escape(form.prevgroup.value);
        var nextgroup = escape(form.nextgroup.value);
        var acrossgroup = escape(form.acrossgroup.value);
        var pintext = escape(form.pintext.value);
        var activity = escape(form.activity.value);
        var categories = escape(form.categories.value);
        var colors = escape(form.colors.value);
        var center_lat = parseFloat(map.getCenter().lat());
        var center_lng = parseFloat(map.getCenter().lng());
        var zoom = String(map.getZoom());
        var marker_lat = parseFloat(marker.getPoint().lat());
        var marker_lng = parseFloat(marker.getPoint().lng());
        var url = "/add_map?place="+place_name+"&center_lat="+center_lat+"&center_lng="+center_lng+"&zoom="+zoom+"&people="+people+"&contact="+contact+"&moreinfo="+moreinfo+"&prevgroup="+prevgroup+"&nextgroup="+nextgroup+"&acrossgroup="+acrossgroup+"&pintext="+pintext+"&activity="+activity+"&categories="+categories+"&colors="+colors+"&marker_lat="+marker_lat+"&marker_lng="+marker_lng;
        // GLog.write("About to send "+url+ " to the server"); 

        // ===== send the data to the server
        GDownloadUrl(url, function(doc) { 
            });  
        marker.closeInfoWindow();
        GEvent.removeListener(myEventListener);

        alert("Your map has been created or revised. You and your group can use it at the address (URL) in your browser. Be sure to BOOKMARK this page and distribute the URL to your group.");
        return true;
      }


      // extract colors from template_value color
      var colors = '';
      {% for s in color%}
      // var tempindex = '{{forloop.counter0}}' ; 
      colors = colors + '{{s}} ' ; 
      {% endfor %}
      if ('' == colors){colors = "ff0000 ffff00"};

      // extract categories from template_value category
      var categories = '';
      {% for s in category%}
      // var tempindex = '{{forloop.counter0}}' ; 
      categories = categories + '{{s}} ' ; 
      {% endfor %}
      if ('' == categories){categories = "typical special"};


      var iwform = 'Enter your group\'s information:<br>'
        + '<form onsubmit="process(this); return false" action="#">'
        + 'Group Name or Initials: '
        + '<br />'
        + '<strong>' + place_name + '</strong>'
        + '<br />'
        + 'People'
        + '  <input type="text" name="people" value="{{ people|default:"do-gooders"}}" id="idinput" size="31" maxlength="31"/>'
        + '<br />'
        + 'Activity'
        + '  <input type="text" name="activity" value="{{ activity|default:"live"}}" size="31" maxlength="31"/>'
        + '<br />'
        + 'Map pin text field description'
        + '  <input type="text" name="pintext" value="{{ pintext|default:"Name"}}" size="31" maxlength="31"/>'
        + '<br />'
        + 'Contact'
        + '  <input type="text" name="contact" value="{{contact|default:"schott DOT bee are eye eh en AT gee em ae eye el DOT com"}}" size="31" maxlength="91"/>'
        + '<br />'
        + 'Pin categories (space separated)'
        + '  <input type="textarea" name="categories" value="' +categories+ '" size="31" maxlength="91"/>'
        + '<br />'
        + 'Pin colors (space separated)'
        + '  <input type="textarea" name="colors" value="' +colors+ '" size="31" maxlength="91"/>'
        + '<br />'
        + 'More information'
        + '  <input type="textarea" name="moreinfo" value="{{ moreinfo|default:"This is important"|escape}}" size="31" maxlength="291"/>'
        + '<br />'
        + 'The next 3 apply only to special situations regarding hiway groups. Most will be left blank.'
        + '<br />'
        + 'Next group name'
        + '  <input type="text" name="nextgroup" value="{{nextgroup}}" size="31" maxlength="31"/>'
        + '<br />'
        + 'Previous group name'
        + '  <input type="text" name="prevgroup" value="{{prevgroup}}" size="31" maxlength="31"/>'
        + '<br />'
        + 'Across median group name'
        + '  <input type="text" name="acrossgroup" value="{{acrossgroup}}" size="31" maxlength="31"/>'
        + '  <input type="hidden" name="place_name"/>'
        + '  <input type="hidden" name="center_lat"/>'
        + '  <input type="hidden" name="center_lng"/>'
        + '  <input type="hidden" name="zoom"/>'
        + '  <input type="hidden" name="marker_lat"/>'
        + '  <input type="hidden" name="marker_lng"/>'          
        + '  <input type="submit" value="Submit" />'
        + '<\/form>';

      var marker = createMarker(startpin);

        // display a warning if the browser was not compatible
      } else {
        alert("Sorry, the Google Maps API is not compatible with this browser");
      }

      // This Javascript is based on code provided by the
      // Blackpool Community Church Javascript Team
      // http://www.commchurch.freeserve.co.uk/   
      // http://econym.googlepages.com/index.htm


      //]]>
    </script>
    </p>
  </body>

</html>
